{"id":1354,"date":"2018-03-02T20:42:52","date_gmt":"2018-03-02T19:42:52","guid":{"rendered":"http:\/\/yarogniew.net\/arduino\/?page_id=1354"},"modified":"2018-03-31T00:17:37","modified_gmt":"2018-03-30T22:17:37","slug":"p5-js-ciekawe-skecze","status":"publish","type":"page","link":"http:\/\/adsl_zapas.dkonto.pl\/index.php\/javascript\/p5-js-ciekawe-skecze\/","title":{"rendered":"P5.js skecze"},"content":{"rendered":"
\n

windowWidth, windowHeight, easing<\/em><\/p>\n

\r\nvar x = 0;\r\nvar y = 0;\r\nvar px = 0;\r\nvar py = 0;\r\nvar easing = 0.05;\r\n\r\nfunction setup() {\r\n  createCanvas(windowWidth, windowHeight);\r\n  stroke(0, 102);\r\n}\r\n\r\nfunction draw() {\r\n  var targetX = mouseX;\r\n  x += (targetX - x) * easing;\r\n  var targetY = mouseY;\r\n  y += (targetY - y) * easing;\r\n  var weight = dist(x, y, px, py);\r\n  strokeWeight(weight);\r\n  line(x, y, px, py);\r\n  py = y;\r\n  px = x;\r\n}<\/pre>\n
\n
keyCode, LEFT_ARROW…<\/em><\/p>\n
\r\nvar x = 215;\r\nvar y = 215;\r\n\r\nfunction setup() {\r\n  createCanvas(480, 480);\r\n}\r\n\r\nfunction draw() {\r\n  if (keyIsPressed) {\r\n    if (keyCode == LEFT_ARROW) {\r\n      x--;\r\n    }\r\n    if (keyCode == RIGHT_ARROW) {\r\n      x++;\r\n    }\r\n    if (keyCode == UP_ARROW) {\r\n      y--;\r\n    }\r\n    if (keyCode == DOWN_ARROW) {\r\n      y++;\r\n    }\r\n  }\r\n  rect(x, y, 30, 30);\r\n}\r\n\r\n<\/pre>\n
\n
wave = new p5.Oscillator()…<\/em><\/p>\n
\r\n\r\n\/\/ Daniel Shiffman\r\n\/\/ http:\/\/codingtra.in\r\n\/\/ http:\/\/patreon.com\/codingtrain\r\n\/\/ Code for: https:\/\/youtu.be\/Bk8rLzzSink\r\n\r\nvar wave;\r\n\r\nvar button;\r\nvar slider;\r\nvar playing = false;\r\n\r\nfunction setup() {\r\n  createCanvas(100, 100);\r\n  wave = new p5.Oscillator();\r\n  slider = createSlider(100, 1200, 440);\r\n\r\n  wave.setType('sine');\r\n  wave.start();\r\n  wave.freq(120);\r\n  wave.amp(0.3);\r\n\r\n\r\n  button = createButton('play\/pause');\r\n  button.mousePressed(toggle);\r\n}\r\n\r\nfunction draw() {\r\n  wave.freq(slider.value());\r\n  if (playing) {\r\n    background(255, 0, 255);\r\n  } else {\r\n    background(51);\r\n  }\r\n}\r\n\r\nfunction toggle() {\r\n  if (!playing) {\r\n    wave.amp(0.5, 1);\r\n    playing = true;\r\n  } else {\r\n    wave.amp(0, 1);\r\n    playing = false;\r\n  }\r\n\r\n\r\n}\r\n\r\n<\/pre>\n
\n
p5.Noise<\/em><\/p>\n
http:\/\/yarogniew.net\/programming\/p5js_testowy\/<\/a><\/p>\n
\r\n\r\nvar osc;\r\nvar playing = false;\r\nvar x = 215;\r\nvar y = 215;\r\n\r\nfunction setup() {\r\n  createCanvas(480, 480);\r\n  osc1 = new p5.Noise('white');\r\n  osc2 = new p5.Noise('pink');\r\n  osc1.amp(0, 0);\r\n  osc1.start();\r\n  osc2.amp(0, 0);\r\n  osc2.start();\r\n}\r\n\r\nfunction draw() {\r\n  if (keyIsPressed) {\r\n\r\n    if (keyCode == LEFT_ARROW) {\r\n      x--;\r\n      osc1.amp(0.5, 0);\r\n    }\r\n    if (keyCode == RIGHT_ARROW) {\r\n      x++;\r\n      osc1.amp(0.5, 0);\r\n    }\r\n    if (keyCode == UP_ARROW) {\r\n      y--;\r\n      osc2.amp(0.8, 0);\r\n    }\r\n    if (keyCode == DOWN_ARROW) {\r\n      y++;\r\n      osc2.amp(0.8, 0);\r\n    }\r\n  }\r\n  rect(x, y, 30, 30);\r\n\r\n  osc1.amp(0.0, 0.1);\r\n  osc2.amp(0.0, 0.1);\r\n}\r\n\r\n<\/pre>\n
\n
c = get(mouseX, mouseY);<\/em><\/p>\n
https:\/\/yarogniew.github.io\/RGB-czytanie-koloru-p5js\/<\/a><\/p>\n
\r\n\/* P5JS CODE *\/\r\nvar img;\r\nvar c;\r\nvar d;\r\n\r\nfunction preload()\r\n{\r\n    img = loadImage("pencils.jpg");\r\n}\r\n\r\nfunction setup() {\r\n    createCanvas(380, 480);\r\n    c = color('white');\r\n    d = -50;\r\n}\r\n\r\nfunction draw() {\r\n    image(img, 0, 0);\r\n\r\n    strokeWeight(1);\r\n    noStroke();\r\n    fill(c);\r\n    rect(width\/4, 2, width\/2, 20);\r\n    var rgbV = c[0] + "," + c[1] + "," + c[2];\r\n    fill(c[0]+d, c[1]+d, c[2]+d);\r\n    textAlign(CENTER);\r\n    if (c[0]&lt;255)\r\n      {\r\n        text(rgbV , width\/2, 32);\r\n      }\r\n}\r\n\r\nfunction mousePressed()\r\n{\r\n    c = get(mouseX, mouseY);\r\n\r\n\r\n    \/\/ var particle = new Particle();\r\n    \/\/particle.callFunction({\r\n       \/\/deviceId: 'YOURDEVICEID',\r\n       \/\/name: 'led',\r\n       \/\/argument: rgbValue,\r\n       \/\/auth: 'YOURAUTHVALUE'\r\n    \/\/});\r\n}\r\n\r\n<\/pre>\n
math-noise1d<\/a><\/p>\n
\r\nvar xoff = 0.0;\r\nvar xincrement = 0.003;\r\n\r\nfunction setup() {\r\ncreateCanvas(710, 400);\r\nbackground(0);\r\nnoStroke();\r\n}\r\n\r\nfunction draw() {\r\n\/\/ Create an alpha blended background\r\nfill(0, 10);\r\nrect(0,0,width,height);\r\n\r\n\/\/ Get a noise value based on xoff and scale \r\n\/\/ it according to the window's width\r\nvar n = noise(xoff)*width;\r\n\r\n\/\/ With each cycle, increment xoff\r\nxoff += xincrement;\r\n\r\n\/\/ Draw the ellipse at the value produced by perlin noise\r\nfill(200);\r\nellipse(n,height\/2, 64, 64);\r\n\/\/text(n,30,30);\r\n}<\/pre>\n
\n
Noise Drum Envelope<\/a><\/p>\n
 \r\nvar noise, env, analyzer;\r\n\r\nfunction setup() {\r\n  createCanvas(710, 200);\r\n  noise = new p5.Noise('pink'); \/\/ other types include 'brown' and 'pink'\r\n  noise.start();\r\n\r\n  \/\/ multiply noise volume by 0\r\n  \/\/ (keep it quiet until we're ready to make noise!)\r\n  noise.amp(0);\r\n\r\n  env = new p5.Env();\r\n  \/\/ set attackTime, decayTime, sustainRatio, releaseTime\r\n  env.setADSR(0.001, 0.3, 0.5, 1.5);\r\n  \/\/ set attackLevel, releaseLevel\r\n  env.setRange(1, 0);\r\n\r\n  \/\/ p5.Amplitude will analyze all sound in the sketch\r\n  \/\/ unless the setInput() method is used to specify an input.\r\n  analyzer = new p5.Amplitude();\r\n}\r\n\r\nfunction draw() {\r\n  background('black');\r\n\r\n  \/\/ get volume reading from the p5.Amplitude analyzer\r\n  var level = analyzer.getLevel();\r\n\r\n  \/\/ use level to draw a green rectangle\r\n  var levelHeight = map(level, 0, .4, 0, height);\r\n  fill('red');\r\n  rect(width\/2, height, 5, - levelHeight);\r\n}\r\n\r\nfunction mousePressed() {\r\n  env.play(noise);\r\n} \r\n<\/pre>\n
\n
 \r\n... \r\n<\/pre>\n
\n
 \r\n... \r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
windowWidth, windowHeight, easing var x = 0; var y = 0; var px = 0; var py = 0; var easing = 0.05; function setup() { createCanvas(windowWidth, windowHeight); stroke(0, 102);…<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1327,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1354","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t